<template>
	<div class="homelist">
		<header>
			<h2>{{proptitle}}</h2>
			<router-link to="/mobile/bookslist">更多</router-link>
		</header>
		<ul>
			<li v-for="(item,index) in FilterList" :key="item.id" v-if="(proptitle == '热门推荐' && index < 6) ||(proptitle == '新书上市' && index < 10)">
				<router-link :to="`/mobile/bookdetail/${item.id}`">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`"/>
					<h3>{{item.name}}</h3>
					<span v-show="proptitle == '新书上市'">￥{{item.price.toFixed(2)}}</span>
					<span v-show="proptitle == '热门推荐'">月销量:{{item.salenum}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		name : 'MobileHomeList',
		props : ['proptitle'],
		data() {
			return{
				list : [],
				newlist : [],
			}
		},
		// watch : {
		// 	// 如果数据是请求获取，基本上都需要监听props的数据，确保获取到数据后再进行循环等操作
		// 	proplist(){
		// 		this.list = this.proplist;
		// 	}
		// },
		computed : {
			FilterList(){
				//现在是假数据，不存在时差，直接赋值【后期发起请求后必须删除】
				// this.list = this.proplist;
				// forEach() 只做循环操作
				// map (()=>{return});  是一个具有返回值回调函数
				// let filters = this.newlist.map((item)=>{
				// 	return{
				// 		id : item.id,
				// 		name : item.memo ? item.memo : item.name,
				// 		picture : item.picture ? item.picture : item.pic,
				// 		price : !item.price ? 0 :item.price,
				// 		hot : item.hot ? item.hot : 0
				// 	}
				// });
				let filters = this.newlist;
				filters.sort((a1,a2)=>{
					return this.proptitle == '热门推荐'?a2.salenum-a1.salenum : this.proptitle == '新书上市'?a2.id-a1.id : a1.id-a2.id
				})
				
				return filters;
			}
		},
		created() {
			this.$get('/api/public/findPageBook/1/20/0').then((rep)=>{
				this.newlist = rep.data.data.books;
			})
		}
	}
</script>

<style scoped>
	.homelist{
		width: 100%;
	}
	.homelist header{
		line-height: 2.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.homelist header h2{
		color: #a67b5b;
		font-size: 1rem;
		margin-left: 0.5rem;
	}
	.homelist header a{
		display: inline-block;
		width: 3rem;
		font-size: 0.8rem;
		color: #a67b5b;
	}
	.homelist ul{
		width: 98%;
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.homelist ul li{
		width: 46%;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		text-align: center;
		position: relative;
	}
	.homelist ul li img{
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}
	.homelist ul li h3{
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		background-color: rgba(245, 213, 160, 0.5);
		color: #a67b5b;
		text-align: center;
		font-weight: normal;
		/* 中文强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 支持webkit内核的浏览器才能生效 */
		/* overflow: hidden;
		text-overflow:ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
	}
	.homelist ul li span{
		font-size: 0.7rem;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		right: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角为圆角 */
		border-radius: 0 0 0 0.6rem;
	}
</style>